<template>

  <div>
    <oolongTabs type="panel">
      <oolongTabPane label="标签一">标签一的内容</oolongTabPane>
      <oolongTabPane label="标签二">标签二的内容</oolongTabPane>
      <oolongTabPane label="标签三">标签三的内容</oolongTabPane>
    </oolongTabs>
    <oolongTabs value="name1">
      <oolongTabPane label="标签一" name="name1">标签一的内容</oolongTabPane>
      <oolongTabPane label="标签二" name="name2">标签二的内容</oolongTabPane>
      <oolongTabPane label="标签三" name="name3">标签三的内容</oolongTabPane>
    </oolongTabs>
    <oolongTabs value="name1">
      <oolongTabPane label="标签一">标签一的内容</oolongTabPane>
      <oolongTabPane label="标签二" disabled>标签二的内容</oolongTabPane>
      <oolongTabPane label="标签三">标签三的内容</oolongTabPane>
    </oolongTabs>
    <oolongTabs size="small">
      <oolongTabPane label="标签一">标签一的内容</oolongTabPane>
      <oolongTabPane label="标签二">标签二的内容</oolongTabPane>
      <oolongTabPane label="标签三">标签三的内容</oolongTabPane>
    </oolongTabs>

    <oolongTabs type="panel" closable @on-tab-remove="handleTabRemove">
      <oolongTabPane label="标签一" v-if="tab0">标签一的内容</oolongTabPane>
      <oolongTabPane label="标签二" v-if="tab1">标签二的内容</oolongTabPane>
      <oolongTabPane label="标签三" v-if="tab2">标签三的内容</oolongTabPane>
    </oolongTabs>

    <oolongTabs :animated="false">
      <oolongTabPane label="标签一">标签一的内容</oolongTabPane>
      <oolongTabPane label="标签二">标签二的内容</oolongTabPane>
      <oolongTabPane label="标签三">标签三的内容</oolongTabPane>
    </oolongTabs>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tab0: true,
      tab1: true,
      tab2: true
    }
  },
  methods: {
    handleTabRemove(name) {
      this['tab' + name] = false;
    }
  }
}
</script>
<style lang="scss" scoped>
@import "../resources/css/admin-template/oolong-container";
</style>
